<template>
  <div>
    <div class="top">
      <ul class="list">
        <li
          class="list-node"
          v-for="(topic, index) in showTopcList"
          :key="index"
        >
          <div class="node-text">
            <span
              class="text-icon-selected"
              v-if="topic.type.indexOf('1') >= 0"
            >
              精
            </span>
            <span class="text-icon-top" v-if="topic.type.indexOf('2') >= 0"
              >顶置
            </span>
            {{ topic.content }}
          </div>
          <div class="node-date">
            {{ topic.time }}
          </div>
        </li>
        <li class="show-more" @click="isShowMore = !isShowMore">
          <div class="show-tag" v-if="!isShowMore">
            展开
            <img
              src="../../../../assets/images/icons/icon_arrow_down_grey.png"
              alt=""
              class="show-tag-img"
            />
          </div>
          <div class="show-tag" v-if="isShowMore">
            收起
            <img
              src="../../../../assets/images/icons/icon_arrow_up_grey.png"
              alt=""
              class="show-tag-img"
            />
          </div>
        </li>
      </ul>
    </div>
    <div class="floors">
      <Floor v-for="(floor, index) in floors" :key="index" :floor="floor">
        <template v-slot:gap v-if="floors.length > index + 1">
          <div class="gap"></div>
        </template>
      </Floor>
    </div>
  </div>
</template>

<script>
import Floor from '../../../components/Floor'
export default {
  components: { Floor },
  props: {
    minNum: {
      type: Number,
      default: 3,
    },
    maxNum: {
      type: Number,
      default: 8,
    },
  },
  name: '',
  data() {
    return {
      isShowMore: false,
      // 顶置列表
      topicList: [
        {
          type: ['1', '2'],
          content: '如何使用多屏互动在Royole Moon上观看手机上的电影或玩游戏',
          time: '03-17',
        },
        {
          type: ['1', '2'],
          content: 'Royole Moon 基本按键及手势操作',
          time: '03-17',
        },
        {
          type: ['1', '2'],
          content: 'Royole Moon 基本按键及手势操作',
          time: '03-17',
        },
        {
          type: ['1', '2'],
          content: 'Royole Moon 基本按键及手势操作基本按键及手势操作',
          time: '03-17',
        },
      ],
      floors: [
        {
          // 楼层
          type: 1,
          userInfo: {
            name: '张三三',
            //评论人头像
            avatar:
              'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202006%2F13%2F20200613095119_riyfl.thumb.400_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1618894839&t=fd3b79de21800b11b08d617bcf3bd409',
            //多久前评论
            time: '3小时',
            // 评论设备
            device: 'Flexpai2',
            // 评论内容
          },
          comment: {
            // 评论内容
            text: '全新的用户体验',
            // 评论类型
            type: ['1', '2'],
          },
          picList: [
            {
              src:
                'http://s1.royole.com/ufs/templates/royole/assets/images/home/swiper/3.jpg',
            },
            {
              src:
                'http://s1.royole.com/ufs/templates/royole/assets/images/home/swiper/4.jpg',
            },
            {
              src:
                'http://s1.royole.com/ufs/templates/royole/assets/images/home/swiper/5.jpg',
            },
          ],
        },
        {
          // 楼层
          type: 2,
          userInfo: {
            name: '张三三',
            //评论人头像
            avatar:
              'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202006%2F13%2F20200613095119_riyfl.thumb.400_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1618894839&t=fd3b79de21800b11b08d617bcf3bd409',
            //多久前评论
            time: '3小时',
            // 评论设备
            device: 'Flexpai2',
            // 评论内容
          },
          comment: {
            // 评论内容
            text: '全新的用户体验',
            // 评论类型
            type: ['1', '2'],
          },
          video:
            'https://test.charrobot.com/file_upload/files/606d6f69c51c2/1617953317169242.mp4',
        },
      ],
    }
  },
  watch: {},
  computed: {
    showTopcList() {
      return this.isShowMore
        ? this.topicList.slice(0, this.maxNum)
        : this.topicList.slice(0, this.minNum)
    },
  },
  methods: {},
  created() {},
  mounted() {},
}
</script>
<style lang="scss" scoped>
.floors {
  padding: 24px 32px;
}
.top {
  padding: 16px 32px;
  border-bottom: 1px solid rgba(#000000, 0.1);
}
.gap {
  height: 1px;
  border-bottom: 1px solid rgba($color: #000000, $alpha: 0.1);
  margin-bottom: 32px;
}
.text-icon-selected {
  display: inline-block;
  width: 20px;
  height: 16px;
  text-align: center;
  line-height: 16px;
  background: #eb2d4b;
  border-radius: 3px;
  color: #ffffff;
  font-size: 12px;
  font-weight: 500;
}
.text-icon-top {
  display: inline-block;
  padding: 0 4px;
  height: 16px;
  line-height: 16px;
  background: $color-royole;
  border-radius: 3px;
  color: #ffffff;
  font-size: 12px;
  font-weight: 500;
}
.list-node {
  padding-bottom: 16px;
  display: flex;
  justify-content: space-between;
  font-size: 16px;
  line-height: 24px;
  font-size: 16px;
  color: #000000;
  line-height: 24px;
  font-weight: 400;
}
.node-date {
  color: $color-font-grey;
  line-height: 20px;
}
.show-tag {
  display: flex;
  align-items: center;
  justify-content: center;
  color: $color-font-grey;
}
.show-tag-img {
  width: 20px;
  padding-right: 4px;
}
</style>
